<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script type="text/javascript">
	window.onload=function(){
		// 获取标签的id//?????????/
		run = document.getElementById("run");
		tu1 = document.getElementById("tu1");
		// tu2 = document.getElementById("tu2");
		// tu2 = document.getElementById('tu2');
		// left=tu1.getAttribute('left');
		// top=tu1.getAttribute('top');
		right = window.getComputedStyle ? window.getComputedStyle(tu1,null).right :tu1.currentStyle.right;//获取当前样式属性值
		// left = window.getComputedStyle ? window.getComputedStyle(tu2,null).left :tu2.currentStyle.left;
		right=parseInt(right);
		// left=parseInt(left);
		// top=parseInt(top);
		x=0;
		function active(){

			if(x==0){
				right+=10;
				
			}else{
				right-=10;
			}


			if(right==1000){
				x=1;
			}else if(right==0){
				x=0;
			}
			// alert(right)
			tu1.style.right=right+'px';
			// alert(y)
			// tu1.style.top=top+'px';
		}
		run.onclick = function  () {
				if(run.getAttribute('value')=='开始'){
					run.setAttribute('value',"停止");
					 time = setInterval(active, 100);
				}else{
					run.setAttribute('value',"开始");
					clearInterval(time);
				}
				

	}
}
	</script>
	<style type="text/css">
	#tu1{
		position: absolute;
		/*display: block;*/
		width: 380px;
		height: 220px;
		right: 50px;
		top: 50px;
		
	}
	#tu2{
		position: absolute;
		/*display: block;*/
		width: 300px;
		height: 220px;
		left: 0px;
		top:300px;	
	}

	</style>
	<title>小狗跑图</title>
</head>
<body>
	<input type="button" id="run" value="开始">
	<img src="./u=4220103486,324828144&fm=21&gp=0.jpg.gif" alt="" id="tu1">
	<img src="./8648fef0f736afc3a0a31977b119ebc4b7451278.jpg.gif" alt="" id="tu2">
	
</body>
</html>